import {forwardRef, ReactNode, useContext, useEffect, useState} from 'react';
import {StyleContext} from '@/context/style-context.tsx';
import {useParams, useLocation, useNavigate} from 'react-router-dom';
import {Button} from 'antd';
import {ButtonsProps, SlButtonProps} from '@/types/buttons';
import SvgIcon from '@/components/SvgIcon';
import buttonGroupStyle from './index.module.scss';
import {MenuButtonItem, useMenuStore} from "@/store/menuStore.tsx";
import classNames from "classnames";

const SlButtonGroup = forwardRef(
    (
        {
            buttons,
            isAuth,
            status,
            row,
            rowIndex,
            offset = 24,
            style,
            clickProps,
            disabled,
            onCallback,
            stopPropagation,
            align
        }: ButtonsProps,
        ref,
    ) => {
        const {currentRoute, buttonList} = useMenuStore();
        const {namespace, elNamespace} = useContext(StyleContext);
        const [realButtons, setRealButtons] = useState<SlButtonProps[]>([])
        const styleClass = {
            wrapper: `${namespace}-button-group`,
        };

        useEffect(() => {
            if (currentRoute && currentRoute.menuName && buttonList && Object.keys(buttonList).length && buttonList[currentRoute.menuName]) {
                const allButtons = buttonList[currentRoute.menuName];
                const newButtons = buttons.filter((button: any) => {
                    const fieldValue = button.prop || button.field;
                    const isExist = allButtons.find((item: any) => item.menuField === fieldValue)
                    if (isExist && !button.noUseLabel) {
                        if (!button.noUseLabel) {
                            button["label"] = button["label"] ? isExist["menuName"] : "";
                        }
                        if (isExist.icon && isExist.icon !== "#") {
                            button["icon"] = isExist.icon
                        }
                    }
                    return !!isExist;
                })
                setRealButtons(newButtons)
            }
        }, [currentRoute, buttonList]);
        const onClickButton = (item: any, event: any) => {
            if (stopPropagation) {
                event.stopPropagation();
            }
            onCallback &&
            onCallback({
                item,
                row: row ? row : {},
                ...clickProps,
            });
        };
        const renderIcon = (item: any): ReactNode => {
            return item.icon && <SvgIcon iconClass={item.icon}></SvgIcon>;
        };
        return (
            <div
                className={classNames(buttonGroupStyle[styleClass.wrapper], `justify-${align === 'left' ? "start" : align === "right" ? "end" : "center"}`)}
                style={style}>
                {realButtons.map((item, index) => {
                    return (item.screen && item.screen.includes(status)) ||
                    !item.screen ? (
                        <Button
                            key={index}
                            {...item}
                            disabled={item.disabled || disabled}
                            icon={renderIcon(item)}
                            style={{
                                marginLeft: index !== 0 ? `${offset}px` : 0,
                                ...item.style,
                            }}
                            onClick={(event) => onClickButton(item, event)}
                        >
                            {item.label}
                        </Button>
                    ) : null;
                })}
            </div>
        );
    },
);

export default SlButtonGroup;
